سون لرن • آموزش

در این مطلب میخوام سایتی رو بهتون معرفی کنم که در اون آموزش داده شده که چطور تصاویرتون رو با استفاده از SVG پیشرفته تر و زیباتر کنید. مثلا فرض کنید که تصویری دارید که درون اون افرادی هستن و میخاهید اونا رو معرفی کنید. با هاور کردن بر روی هر فرد، همه چیز بغیر از اون فرد سیاه و سفید میشه و نام اون فرد نمایش داده میشه.

برای شروع وارد سایت Interactive-Color-Photo بشین.

امیدوارم بدردتون بخوره.

موفق باشید.

یا علی

- - , .

سون لرن • آموزش...

در این قسمت میخوام یک کد ( Redirecting Loader ) جالب رو در اختیارتون بزارم.

همونطور که دیدین لودری برای ریدایرکت شدن قرار داده شده و میتونین از اون استفاده کنید.

بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. امیدوارم لذت برده باشین.

موفق باشید.

یا علی

Source

- - , .

سون لرن • آموزش...

در این مطلب با ادامه مطالب مربوط با کدهای جایگزین برای jQuery در خدمتتون هستم و امیدوارم که بدردتون بخوره.

موضوع 3 : المنتها و کار با DOM

مورد 16 : دریافت استایلهای یک المنت

اگر بخوایم در jQuery به استایلهای یک المنت دسترسی داشته باشیم، بصورت زیر عمل میکنیم:

میبینید که در ابتدا el مورد نظر رو انتخاب کردیم و با استفاده از متد css به خاصیت ruleName دسترسی پیدا کردیم.

حالا همین کار رو اگر بخواید با Javascript خالص انجام بدین بصورت زیر خواهد بود:

برای IE8 به بالا:

شما میتونین با استفاده از el.currentStyle به خصوصیتهای المنت دسترسی داشته باشید، منتها با توجه به نوع خصوصیت CSS انواع مختلفی برگشت داده میشن. پس باید بفکر راه بهتری باشیم. اگر بخواید حتما IE8 رو پشتیبانی کنه میتونین از این polyfills استفاده کنید و به هدفتون برسید.

برای IE9 به بالا:

میبینید که به سادگی با استفاده از getComputedStyle به خصوصیت مورد نظر از el دست پیدا کردیم.

مورد 17 : دریافت متون یک المنت

اگر بخوایم در jQuery به متون یک المنت دسترسی داشته باشیم، بصورت زیر عمل میکنیم:

میبینید که در ابتدا el مورد نظر رو انتخاب کردیم و با استفاده از متد text به متنهای درون اون دسترسی پیدا کردیم.

حالا همین کار رو اگر بخواید با Javascript خالص انجام بدین بصورت زیر خواهد بود:

برای IE8 به بالا:

میبینید که با استفاده از textContent  یا innerText به متن درون المنت دسترسی پیدا کردیم.

برای IE9 به بالا:

میبینید که به سادگی با استفاده از خصوصیت textContent به متن درون المنت دسترسی پیدا کردیم.

مورد 18 : بررسی داشتن کلاسی خاص

اگر بخوایم در jQuery بررسی کنیم که یک المنت ، کلاس خاصی رو داره یا خیر، بصورت زیر عمل میکنیم:

میبینید که در ابتدا el مورد نظر رو انتخاب کردیم و با استفاده از متد hasClass بررسی میشه که المنت el دارای کلاسی بنام className هست یا خیر. اگر این کلاسو داشته باشه true و در غیر اینصورت false خواهد بود.

حالا همین کار رو اگر بخواید با Javascript خالص انجام بدین بصورت زیر خواهد بود:

برای IE8 به بالا:

میبینید که در ابتدا بررسی میشه که مرورگر خصوصیت classList رو پشتیبانی میکنه یا خیر. اگر پشتیبانی نکرد با استفاده از عبارات منظم یا Regex بررسی میشه که className وجود داره یا خیر. اگر test با موفقیت انجام بشه، true برگشت داده میشه.

برای IE10 به بالا:

بدلیل اینکه مرورگر IE10 به بالا از خصوصیت classList پشتیبانی میکنه، میتونین با روش ساده بالا به هدفتون برسید. با استفاده از متد contains میتونین بررسی کنید که المنت el شامل کلاس className هست یا خیر.

امیدوارم که از این مطلب خوشتون اومده باشه.

موفق و سربلند باشید.

یا علی

Source

- - , .

سون لرن • آموزش...

در این قسمت میخوام یک کد ( Reimagined Profile ) جالب رو در اختیارتون بزارم.

همونطور که دیدین یک استایل زیبا برای پروفایل قرار داده شده و زمانی که بر روی عکس کاربر مورد نظر هاور میکنید حالت اون به زیبایی عوض میشه.

بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. امیدوارم لذت برده باشین.

موفق باشید.

یا علی

Source

- - , .

سون لرن • آموزش...

در این مطلب میخوام سایتی رو بهتون معرفی کنم که در اون تعدادی آیکون زیبا قرار داده شده که میتونین اونا رو بصورت رایگان دانلود کرده و استفاده کنید.

برای شروع وارد سایت icon-font بشین.

امیدوارم بدردتون بخوره.

موفق باشید.

یا علی

- - , .

سون لرن • آموزش...

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700,600,300,800);

* {

  box-sizing: border-box;

}

html,

body {

  overflow-x: hidden;

  font-family: "Open Sans", sans-serif;

  font-weight: 300;

  color: #fff;

  background: #134A46;

  text-align: center;

}

span {

  position: relative;

  display: inline-block;

  margin: 45px 10px;

}

.swing {

  display: inline-block;

  width: 215px;

  padding: 10px 0 10px 15px;

  font-family: "Open Sans", sans;

  font-weight: 400;

  color: #377D6A;

  background: #efefef;

  border: 0;

  border-radius: 3px;

  outline: 0;

  text-indent: 60px;

  transition: all .3s ease-in-out;

}

.swing::-webkit-input-placeholder {

  color: #efefef;

  text-indent: 0;

  font-weight: 300;

}

.swing + label {

  display: inline-block;

  position: absolute;

  top: 0;

  left: 0;

  padding: 10px 15px;

  text-shadow: 0 1px 0 rgba(19, 74, 70, 0.4);

  background: #7AB893;

  border-top-left-radius: 3px;

  border-bottom-left-radius: 3px;

  transform-origin: 2px 2px;

  transform: rotate(0);

  animation: swing-back .4s 1 ease-in-out;

}

@keyframes swing {

  0% {

    transform: rotate(0);

  }

  20% {

    transform: rotate(116deg);

  }

  40% {

    transform: rotate(60deg);

  }

  60% {

    transform: rotate(98deg);

  }

  80% {

    transform: rotate(76deg);

  }

  100% {

    transform: rotate(82deg);

  }

}

@keyframes swing-back {

  0% {

    transform: rotate(82deg);

  }

  100% {

    transform: rotate(0);

  }

}

.swing:focus,

.swing:active {

  color: #377D6A;

  text-indent: 0;

  background: #fff;

  border-top-left-radius: 0;

  border-bottom-left-radius: 0;

}

.swing:focus::-webkit-input-placeholder,

.swing:active::-webkit-input-placeholder {

  color: #aaa;

}

.swing:focus + label,

.swing:active + label {

  animation: swing 1.4s 1 ease-in-out;

  transform: rotate(82deg);

}

- - , .

سون لرن • آموزش...

*, *:after, *::before {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

body {

text-align: center;

padding-top: 50px;

}

@font-face {

font-weight: normal;

font-style: normal;

font-family: 'icomoon';

src:url('fonts/icomoon.eot');

src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),

url('fonts/icomoon.ttf') format('truetype'),

url('fonts/icomoon.woff') format('woff'),

url('fonts/icomoon.svg#icomoon') format('svg');

}

/* General styles for all types of buttons */

.progress-button {

position: relative;

display: inline-block;

padding: 0 60px;

outline: none;

border: none;

background: #1d9650;

color: #fff;

text-transform: uppercase;

letter-spacing: 1px;

font-size: 1em;

line-height: 4;

cursor: pointer;

}

.progress-button[disabled],

.progress-button[disabled].state-loading {

cursor: default;

}

.progress-button .content {

position: relative;

display: block;

}

.progress-button .content::before,

.progress-button .content::after  {

position: absolute;

right: 20px;

color: #0e7138;

font-family: "icomoon";

opacity: 0;

-webkit-transition: opacity 0.3s 0.3s;

transition: opacity 0.3s 0.3s;

}

.progress-button .content::before {

content: "e600"; /* Checkmark for success */

}

.progress-button .content::after {

content: "e601"; /* Cross for error */

}

.progress-button.state-success .content::before,

.progress-button.state-error .content::after {

opacity: 1;

}

.notransition {

-webkit-transition: none !important;

transition: none !important;

}

.progress-button .progress {

background: #148544;

}

.progress-button .progress-inner {

position: absolute;

left: 0;

background: #0e7138;

}

.progress-button[data-horizontal] .progress-inner {

top: 0;

width: 0;

height: 100%;

-webkit-transition: width 0.3s, opacity 0.3s;

transition: width 0.3s, opacity 0.3s;

}

.progress-button[data-vertical] .progress-inner {

bottom: 0;

width: 100%;

height: 0;

-webkit-transition: height 0.3s, opacity 0.3s;

transition: height 0.3s, opacity 0.3s;

}

/* Necessary 3d styles for buttons with perspective */

.progress-button[data-perspective] {

position: relative;

display: inline-block;

padding: 0;

background: transparent;

-webkit-perspective: 900px;

perspective: 900px;

}

.progress-button[data-perspective] .content {

padding: 0 60px;

background: #1d9650;

}

.progress-button[data-perspective] .progress-wrap {

display: block;

-webkit-transition: -webkit-transform 0.2s;

transition: transform 0.2s;

-webkit-transform-style: preserve-3d;

transform-style: preserve-3d;

}

.progress-button[data-perspective] .content,

.progress-button[data-perspective] .progress {

outline: 1px solid rgba(0,0,0,0); /* Smoothen jagged edges in FF */

}

/* flip open 3d */

/* ====================== */

.progress-button[data-style="flip-open"] .content {

z-index: 10;

-webkit-transition: -webkit-transform 0.2s;

transition: transform 0.2s;

-webkit-transform-origin: 50% 0;

transform-origin: 50% 0;

}

.progress-button[data-style="flip-open"] .progress {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

.progress-button[data-style="flip-open"].state-loading .content {

-webkit-transform: rotateX(45deg);

transform: rotateX(45deg);

}

- - , .

سون لرن • آموزش...

در این قسمت میخوام یک کد ( Responsive movie app UI ) جالب رو در اختیارتون بزارم.

همونطور که دیدین رابط کاربری زیبا برای سایت فیلم قرار داده شده و میتونین از اون استفاده کرده و ایده بگیرید.

بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. امیدوارم لذت برده باشین.

موفق باشید.

یا علی

Source

- - , .

سون لرن • آموزش...

در این مطلب میخوام سایتی رو بهتون معرفی کنم که تصویر مورد نظر شما رو به بلاکهای 1 در 1 Lego تبدیل میکنه و اونو مثل وسایل بازی بچه ها میکنه.

برای شروع وارد سایت Legofy بشین.

امیدوارم بدردتون بخوره.

موفق باشید.

یا علی

- - , .

سون لرن • آموزش...

در این مطلب با ادامه مطالب مربوط با کدهای جایگزین برای jQuery در خدمتتون هستم و امیدوارم که بدردتون بخوره.

موضوع 3 : المنتها و کار با DOM

مورد 12 : پیدا کردن المنتها

اگر بخوایم در jQuery المنتهای خاصی رو پیدا و انتخاب کنیم، بصورت زیر عمل میکنیم:

میبینید که به سادگی و با استفاده از $ اومدیم و انتخابگری بر پایه CSS وارد کردیم. حالا jQuery جستجو میکنه و المنتهای منطبق رو بر میگردونه.

حالا همین کار رو اگر بخواید با Javascript خالص انجام بدین بصورت زیر خواهد بود:

برای IE8 به بالا:

میبینید که به سادگی با استفاده از متد querySelectorAll اینکارو کردیم و با وارد کردن انتخابگر مورد نظرمون المنتهای منطبق برگشت داده میشن.

برای این مورد، یعنی انتخاب کردن المنتهای مورد نظر میتونین از دو ابزار زیر نیز استفاده کنید:

مورد 13 : دسترسی به خصوصیت یک المنت

اگر بخوایم در jQuery به خصوصیت های یک المنت دسترسی داشته باشیم، بصورت زیر عمل میکنیم:

میبینید که در کد بالا بسادگی با استفاده از متد attr به خصوصیت tabindex المنت el دسترسی پیدا کردیم.

حالا همین کار رو اگر بخواید با Javascript خالص انجام بدین بصورت زیر خواهد بود:

برای IE8 به بالا:

میبینید که به سادگی با استفاده از متد getAttribute اینکارو کردیم و با وارد کردن خصوصیت مورد نظرمون به ویژگی مورد نظر المنتمون دسترسی پیدا کردیم.

مورد 14 : دریافت محتویات HTML یک المنت

اگر بخوایم در jQuery به محتویات html یک المنت دسترسی داشته باشیم، بصورت زیر عمل میکنیم:

میبینید که در کد بالا بسادگی با استفاده از متد html به محتویات html المنت el دسترسی پیدا کردیم.

حالا همین کار رو اگر بخواید با Javascript خالص انجام بدین بصورت زیر خواهد بود:

برای IE8 به بالا:

میبینید که به سادگی با استفاده از خصوصیت innerHTML از المنت el به محتویات اون دسترسی پیدا کردیم.

مورد 15 : دریافت Outer HTML یک المنت

اگر بخوایم در jQuery به کل کد html شامل خودش هم دسترسی داشته باشیم، بصورت زیر عمل میکنیم:

میبینید که در ابتدا یک div موقتی ساخته شده و یک کپی از المنت مورد نظر درونش قرار داده شده. بعد از اون میتونیم با استفاده از متد html به کل کدهای html اون المنت دسترسی داشته باشیم با این تفاوت که خودش نیز شامل میشود.

حالا همین کار رو اگر بخواید با Javascript خالص انجام بدین بصورت زیر خواهد بود:

برای IE8 به بالا:

میبینید که به سادگی با استفاده از خصوصیت outerHTML از المنت el به کل محتویات اون دسترسی پیدا کردیم. دیدید که Javascript در این مورد خیلی ساده و راحت بود و برای این مورد یک خصوصیت از پیش تعریف شده داشت.

امیدوارم که از این مطلب خوشتون اومده باشه.

موفق و سربلند باشید.

یا علی

Source

- - , .

سون لرن • آموزش...

در این مطلب میخوام سایتی رو بهتون معرفی کنم که در اون ابزاری برای ساخت مسیرهای SVG قرار داده شده و میتونین با استفاده از اون مسیرهای مورد نظرتون رو بسازید و خروجی بگیرید.

برای شروع وارد سایت svg-path-builder بشین.

امیدوارم بدردتون بخوره.

موفق باشید.

یا علی

- - , .

سون لرن • آموزش...

در این قسمت میخوام یک کد ( Shade ) جالب رو در اختیارتون بزارم.

همونطور که دیدین سایه های زیبایی برای متون و ... قرار داده شده و میتونین از اونا در سایتتون استفاده کنید.

بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. امیدوارم لذت برده باشین.

موفق باشید.

یا علی

Source

- - , .

سون لرن • آموزش...

به نام خدا و سلام. در خدمت شما هستیم با 51 ام جلسه از دوره مجازی آموزش طراحی قالب حرفه ای وردپرس هستیم. در این جلسه با هم میریم سراغ پیاده سازی قسمت ادمین وردپرس قالب. برای شروع کار میریم سراغ بررسی نحوه اجرای درخواست های ودرپرس در سمت admin و اینکه چطوری کدها رو به طور مجزا در بخش قالب و در بخش admin پیاده سازی کنیم.سپس میریم سراغ پیاده سازی ابزارک داشبورد وردپرس و با یک مثال عملی نحوه پیاده سازی اونو نشون میدیم و در ادامه هم میریم سراغ منو های مدیریتی.   در این جلسه خواهیم دید :

• بررسی درخواست های بخش مدیریت
• پیاده سازی ابزارک داشبورد
• پیاده سازی منوی های مدیریتی

توضیحات : بعد از درخواست های فراوان دوستان برای برگزاری دوره آموزش طراحی قالب وردپرس به صورت حرفه ای و تلاش سون لرن برای انجام مقدمات برگزاری دوره بالاخره انتظار ها به پایان رسید.در این دوره یک قالب حرفه ای و مردن با افکت های زیبا را به همراه کد نویسی بهینه و هم چنین امکانات متعدد یک وب سایت دانلود و آموزش را با هم پیاده سازی خواهیم کرد.برای راحتی کار دوره به سه بخش کلی تقسیم شده که بخش اول طراحی قالب در فتوشاپ - بخش دوم تبدیل قالب طراحی شده به HTML و CSS و بخش سوم هم پیاده سازی قالب با امکانات حرفه ای در وردپرس هست.چنانچه قبلا در دوره های دیگر سون لرن شرکت کرده اید این دوره علاوه بر آموزش کامل وردپرس تمرینی بسیار حرفه ای برای شما خواهد بود و هم اکنون با محتوایی غنی تر و حرفه ای تر و قیمتی بسیار کمتر از آن چه در دوره های حضوری وجود دارد می توانید در آن ثبت نام کنید !

- - , .

سون لرن • آموزش...

در این مطلب میخوام سایتی رو بهتون معرفی کنم که ابزاری رو در اختیارتون میزاره که میتونین به راحتی فیلترهای Instagram رو بر روی تصاویر مورد نظرتون قرار بدین.

برای شروع وارد سایت CSSgram بشین.

امیدوارم بدردتون بخوره.

موفق باشید.

یا علی

- - , .

سون لرن • آموزش...

* {

margin: 0;

padding: 0;

}

.grid {

padding: 20px 20px 100px 20px;

max-width: 1300px;

margin: 0 auto;

list-style: none;

text-align: center;

}

.grid li {

display: inline-block;

width: 400px;

margin: 0;

padding: 20px;

text-align: left;

position: relative;

}

.grid figure {

margin: 0;

position: relative;

}

.grid figure img {

max-width: 100%;

display: block;

position: relative;

}

.grid figcaption {

position: absolute;

top: 0;

left: 0;

background: #2c3f52;

color: #ed4e6e;

}

.grid figcaption h3 {

margin: 0;

padding: 0;

color: #fff;

}

.grid figcaption span:before {

content: 'by ';

}

.grid figcaption a {

text-align: center;

padding: 5px 10px;

border-radius: 2px;

display: inline-block;

background: #ed4e6e;

color: #fff;

}

/* Individual Caption Styles */

/* Caption Style 6 */

.cs-style-6 figure img {

z-index: 10;

-webkit-transition: -webkit-transform 0.4s;

-moz-transition: -moz-transform 0.4s;

transition: transform 0.4s;

}

.no-touch .cs-style-6 figure:hover img,

.cs-style-6 figure.cs-hover img {

-webkit-transform: translateY(-50px) scale(0.5);

-moz-transform: translateY(-50px) scale(0.5);

-ms-transform: translateY(-50px) scale(0.5);

transform: translateY(-50px) scale(0.5);

}

.cs-style-6 figcaption {

height: 100%;

width: 100%;

-webkit-backface-visibility: hidden;

-moz-backface-visibility: hidden;

backface-visibility: hidden;

}

.cs-style-6 figcaption h3 {

margin-top: 60%;

}

.cs-style-6 figcaption a {

position: absolute;

bottom: 20px;

right: 20px;

}

- - , .

سون لرن • آموزش...

در این قسمت میخوام یک کد ( Responsive Animated Infographic ) جالب رو در اختیارتون بزارم.

همونطور که دیدین یک اینفوگرافیک انیمیشنی واکنشگرا قرار داده شده و با چرخش المنتهای مختلف رو بررسی میکنه و توضیح میده. شما میتونین از این مدل ایده بگیرید.

بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. امیدوارم لذت برده باشین.

موفق باشید.

یا علی

Source

- - , .

سون لرن • آموزش...

در این مطلب میخوام سایتی رو بهتون معرفی کنم که در اون افکتهای زیبای انیمیشنی برای نمایش قسمتی از صفحه بکار رفته شده و میتونین از اون برای سایت خودتون استفاده کنید.

برای شروع وارد سایت animated-intro بشین.

امیدوارم بدردتون بخوره.

موفق باشید.

یا علی

- - , .

سون لرن • آموزش...

در این مطلب میخوام سایتی رو بهتون معرفی کنم که ابزاری رو در اختیارتون میذاره که با استفاده از اون میتونید مسیرهای SVG رو با حالتهای مختلف انیمیشنی کنید.

برای شروع وارد سایت segment بشین.

امیدوارم بدردتون بخوره.

موفق باشید.

یا علی

- - , .

سون لرن • آموزش...

*, *:after, *::before {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

body {

text-align: center;

padding-top: 50px;

}

@font-face {

font-weight: normal;

font-style: normal;

font-family: 'icomoon';

src:url('fonts/icomoon.eot');

src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),

url('fonts/icomoon.ttf') format('truetype'),

url('fonts/icomoon.woff') format('woff'),

url('fonts/icomoon.svg#icomoon') format('svg');

}

/* General styles for all types of buttons */

.progress-button {

position: relative;

display: inline-block;

padding: 0 60px;

outline: none;

border: none;

background: #1d9650;

color: #fff;

text-transform: uppercase;

letter-spacing: 1px;

font-size: 1em;

line-height: 4;

cursor: pointer;

}

.progress-button[disabled],

.progress-button[disabled].state-loading {

cursor: default;

}

.progress-button .content {

position: relative;

display: block;

}

.progress-button .content::before,

.progress-button .content::after  {

position: absolute;

right: 20px;

color: #0e7138;

font-family: "icomoon";

opacity: 0;

-webkit-transition: opacity 0.3s 0.3s;

transition: opacity 0.3s 0.3s;

}

.progress-button .content::before {

content: "e600"; /* Checkmark for success */

}

.progress-button .content::after {

content: "e601"; /* Cross for error */

}

.progress-button.state-success .content::before,

.progress-button.state-error .content::after {

opacity: 1;

}

.notransition {

-webkit-transition: none !important;

transition: none !important;

}

.progress-button .progress {

background: #148544;

}

.progress-button .progress-inner {

position: absolute;

left: 0;

background: #0e7138;

}

.progress-button[data-horizontal] .progress-inner {

top: 0;

width: 0;

height: 100%;

-webkit-transition: width 0.3s, opacity 0.3s;

transition: width 0.3s, opacity 0.3s;

}

.progress-button[data-vertical] .progress-inner {

bottom: 0;

width: 100%;

height: 0;

-webkit-transition: height 0.3s, opacity 0.3s;

transition: height 0.3s, opacity 0.3s;

}

/* Necessary 3d styles for buttons with perspective */

.progress-button[data-perspective] {

position: relative;

display: inline-block;

padding: 0;

background: transparent;

-webkit-perspective: 900px;

perspective: 900px;

}

.progress-button[data-perspective] .content {

padding: 0 60px;

background: #1d9650;

}

.progress-button[data-perspective] .progress-wrap {

display: block;

-webkit-transition: -webkit-transform 0.2s;

transition: transform 0.2s;

-webkit-transform-style: preserve-3d;

transform-style: preserve-3d;

}

.progress-button[data-perspective] .content,

.progress-button[data-perspective] .progress {

outline: 1px solid rgba(0,0,0,0); /* Smoothen jagged edges in FF */

}

/* Rotate back 3d */

/* ====================== */

.progress-button[data-style="rotate-back"] .progress-wrap {

-webkit-transition-timing-function: ease-out;

transition-timing-function: ease-out;

}

.progress-button[data-style="rotate-back"] .content {

-webkit-backface-visibility: hidden;

backface-visibility: hidden;

}

.progress-button[data-style="rotate-back"] .progress {

position: absolute;

top: 100%;

left: 0;

width: 100%;

height: 100%;

-webkit-transform: rotateX(-180deg);

transform: rotateX(-180deg);

-webkit-transform-origin: 50% 0%;

transform-origin: 50% 0%;

-webkit-backface-visibility: hidden;

backface-visibility: hidden;

}

.progress-button[data-style="rotate-back"].state-loading .progress-wrap {

-webkit-transform: rotateX(180deg) scaleX(0.6) scaleY(0.3);

transform: rotateX(180deg) scaleX(0.6) scaleY(0.3);

}

- - , .

سون لرن • آموزش...